<template>
  <div class="influBox">
    <div class="influTitle">团队影响</div>
    <div class="influCharts">
      <div class="container" ref="a"></div>
      <div class="container" ref="b"></div>
      <div class="container" ref="c"></div>
      <div class="container" ref="d"></div>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      echarts: [null, null, null, null],
      data: null
    }
  },
  mounted() {
    this.initECharts()
    this.getData()
  },
  methods: {
    initECharts() {
      this.echarts[0] = this.$ECharts.init(this.$refs.a)
      this.echarts[1] = this.$ECharts.init(this.$refs.b)
      this.echarts[2] = this.$ECharts.init(this.$refs.c)
      this.echarts[3] = this.$ECharts.init(this.$refs.d)
    },
    getData() {
      this.updateECharts()
    },
    updateECharts() {
      const option1 = {
        tooltip: {
          // 工具提示框
          formatter: '{a} <br/>{b} : {c}次'
          //backgroundColor: '#ff000e'
        },
        series: [
          {
            name: 'Activity',
            type: 'gauge',
            radius: '85%', // 仪表盘圆圈大小
            center: ['50%', '40%'], // 仪表盘位置（圆心坐标）
            startAnger: 208, //开始角度
            endAnger: -28, // 结束角度
            min: 0, //最小数值
            max: 4800, // 最大数值，为段数与刻度间隔的公倍数
            splitNumber: 8, //仪表盘分割段数，默认是10
            animationDelay: '1500', // 初始动画的延迟
            progress: {
              show: true
            },
            axisLine: {
              // 轮廓线
              lineStyle: {
                width: 3.5,
                color: [[1, 'darkorange']]
              }
            },
            splitLine: {
              // 分割线
              length: 6,
              lineStyle: {
                color: 'darkorange',
                width: 1
              }
            },
            axisLabel: {
              // 大刻度标签
              distance: -16.5, // 文字跟刻度距离
              textStyle: {
                color: 'darkorange',
                fontSize: 8
              },
              data: [
                {
                  value: 3656,
                  name: '开展活动'
                }
              ],
              formatter: function (param) {
                if (param % 2400 == 0) return param // 大刻度分割，哪个刻度显示数据
              }
            },
            axisTick: {
              // 小刻度相关
              // 小刻度相关
              show: true,
              length: 2
            },
            pointer: {
              // 指针长度与宽度
              width: 2.5,
              height: '95%'
            },
            detail: {
              // 仪表盘详细数据相关
              // 仪表盘详细数据
              textStyle: {
                color: '#fff',
                fontSize: 12
              }
            },
            title: {
              color: '#fff',
              fontSize: 12,
              offsetCenter: [0, '130%'] // 设置标题位置
            },
            itemStyle: {
              // 指针样式
              normal: {
                color: 'darkorange' // #1ed133
              }
            },
            data: [
              {
                value: 3656,
                name: '开展活动'
              }
            ]
          },
          {
            type: 'gauge',
            axisLine: {
              lineStyle: {
                width: 1,
                color: [[1, 'darkorange']]
              }
            },
            radius: '60%', // 仪表盘圆圈大小
            center: ['50%', '40%'], // 仪表盘位置（圆心坐标）
            startAnger: 208, //开始角度
            endAnger: -28,
            splitLine: { show: false },
            axisLabel: { show: false },
            axisTick: { show: false },
            detail: { show: false }
          }
        ]
      }
      const option2 = {
        tooltip: {
          // 工具提示框
          formatter: '{a} <br/>{b} : {c}册次'
          //backgroundColor: '#ff000e'
        },
        series: [
          {
            name: 'Book',
            type: 'gauge',
            radius: '85%', // 仪表盘圆圈大小
            center: ['50%', '40%'], // 仪表盘位置（圆心坐标）
            startAnger: 208, //开始角度
            endAnger: -28, // 结束角度
            min: 0, //最小数值
            max: 200000, // 最大数值
            splitNumber: 8, //仪表盘分割段数，默认是10
            animationDelay: '1500', // 初始动画的延迟
            progress: {
              show: true
            },
            axisLine: {
              // 轮廓线
              lineStyle: {
                width: 3.5,
                color: [[1, 'darkorange']]
              }
            },
            splitLine: {
              // 分割线
              length: 6,
              lineStyle: {
                color: 'darkorange',
                width: 1
              }
            },
            axisLabel: {
              // 大刻度标签
              distance: -16.5, // 文字跟刻度距离
              textStyle: {
                color: 'darkorange',
                fontSize: 8
              },
              data: [
                {
                  value: 100000,
                  name: '教材'
                }
              ],
              formatter: function (param) {
                if (param % 100000 == 0) return param // 大刻度分割，哪个刻度显示数据
              }
            },
            axisTick: {
              // 小刻度相关
              // 小刻度相关
              show: true,
              length: 2
            },
            pointer: {
              // 指针长度与宽度
              width: 2.5,
              height: '95%'
            },
            detail: {
              // 仪表盘详细数据相关
              // 仪表盘详细数据
              textStyle: {
                color: '#fff',
                fontSize: 12
              }
            },
            title: {
              color: '#fff',
              fontSize: 12,
              offsetCenter: [0, '130%'] // 设置标题位置
            },
            itemStyle: {
              // 指针样式
              normal: {
                color: 'darkorange' // #1ed133
              }
            },
            data: [
              {
                value: 100000,
                name: '教材'
              }
            ]
          },
          {
            type: 'gauge',
            axisLine: {
              lineStyle: {
                width: 1,
                color: [[1, 'darkorange']]
              }
            },
            radius: '60%', // 仪表盘圆圈大小
            center: ['50%', '40%'], // 仪表盘位置（圆心坐标）
            startAnger: 208, //开始角度
            endAnger: -28,
            splitLine: { show: false },
            axisLabel: { show: false },
            axisTick: { show: false },
            detail: { show: false }
          }
        ]
      }
      const option3 = {
        tooltip: {
          // 工具提示框
          formatter: '{a} <br/>{b} : {c}次'
          //backgroundColor: '#ff000e'
        },
        series: [
          {
            name: 'Movie',
            type: 'gauge',
            radius: '85%', // 仪表盘圆圈大小
            center: ['50%', '40%'], // 仪表盘位置（圆心坐标）
            startAnger: 208, //开始角度
            endAnger: -28, // 结束角度
            min: 0, //最小数值
            max: 1000, // 最大数值
            splitNumber: 8, //仪表盘分割段数，默认是10
            animationDelay: '1500', // 初始动画的延迟
            progress: {
              show: true
            },
            axisLine: {
              // 轮廓线
              lineStyle: {
                width: 3.5,
                color: [[1, 'darkorange']]
              }
            },
            splitLine: {
              // 分割线
              length: 6,
              lineStyle: {
                color: 'darkorange',
                width: 1
              }
            },
            axisLabel: {
              // 大刻度标签
              distance: -16.5, // 文字跟刻度距离
              textStyle: {
                color: 'darkorange',
                fontSize: 8
              },
              data: [
                {
                  value: 675,
                  name: '媒体报道'
                }
              ],
              formatter: function (param) {
                if (param % 100 == 0) return param // 大刻度分割，哪个刻度显示数据
              }
            },
            axisTick: {
              // 小刻度相关
              // 小刻度相关
              show: true,
              length: 2
            },
            pointer: {
              // 指针长度与宽度
              width: 2.5,
              height: '95%'
            },
            detail: {
              // 仪表盘详细数据相关
              // 仪表盘详细数据
              textStyle: {
                color: '#fff',
                fontSize: 12
              }
            },
            title: {
              color: '#fff',
              fontSize: 12,
              offsetCenter: [0, '130%'] // 设置标题位置
            },
            itemStyle: {
              // 指针样式
              normal: {
                color: 'darkorange' // #1ed133
              }
            },
            data: [
              {
                value: 675,
                name: '媒体报道'
              }
            ]
          },
          {
            type: 'gauge',
            axisLine: {
              lineStyle: {
                width: 1,
                color: [[1, 'darkorange']]
              }
            },
            radius: '60%', // 仪表盘圆圈大小
            center: ['50%', '40%'], // 仪表盘位置（圆心坐标）
            startAnger: 208, //开始角度
            endAnger: -28,
            splitLine: { show: false },
            axisLabel: { show: false },
            axisTick: { show: false },
            detail: { show: false }
          }
        ]
      }
      const option4 = {
        tooltip: {
          // 工具提示框
          formatter: '{a} <br/>{b} : {c}场'
          //backgroundColor: '#ff000e'
        },
        series: [
          {
            name: 'Stream',
            type: 'gauge',
            radius: '85%', // 仪表盘圆圈大小
            center: ['50%', '40%'], // 仪表盘位置（圆心坐标）
            startAnger: 208, //开始角度
            endAnger: -28, // 结束角度
            min: 0, //最小数值
            max: 1000, // 最大数值
            splitNumber: 8, //仪表盘分割段数，默认是10
            animationDelay: '1500', // 初始动画的延迟
            progress: {
              show: true
            },
            axisLine: {
              // 轮廓线
              lineStyle: {
                width: 3.5,
                color: [[1, 'darkorange']]
              }
            },
            splitLine: {
              // 分割线
              length: 6,
              lineStyle: {
                color: 'darkorange',
                width: 1
              }
            },
            axisLabel: {
              // 大刻度标签
              distance: -16.5, // 文字跟刻度距离
              textStyle: {
                color: 'darkorange',
                fontSize: 8
              },
              data: [
                {
                  value: 137,
                  name: '开展直播'
                }
              ],
              formatter: function (param) {
                if (param % 100 == 0) return param // 大刻度分割，哪个刻度显示数据
              }
            },
            axisTick: {
              // 小刻度相关
              // 小刻度相关
              show: true,
              length: 2
            },
            pointer: {
              // 指针长度与宽度
              width: 2.5,
              height: '95%'
            },
            detail: {
              // 仪表盘详细数据相关
              // 仪表盘详细数据
              textStyle: {
                color: '#fff',
                fontSize: 12
              }
            },
            title: {
              color: '#fff',
              fontSize: 12,
              offsetCenter: [0, '130%'] // 设置标题位置
            },
            itemStyle: {
              // 指针样式
              normal: {
                color: 'darkorange' // #1ed133
              }
            },
            data: [
              {
                value: 137,
                name: '开展直播'
              }
            ]
          },
          {
            type: 'gauge',
            axisLine: {
              lineStyle: {
                width: 1,
                color: [[1, 'darkorange']]
              }
            },
            radius: '60%', // 仪表盘圆圈大小
            center: ['50%', '40%'], // 仪表盘位置（圆心坐标）
            startAnger: 208, //开始角度
            endAnger: -28,
            splitLine: { show: false },
            axisLabel: { show: false },
            axisTick: { show: false },
            detail: { show: false }
          }
        ]
      }
      this.echarts[0].setOption(option1)
      this.echarts[1].setOption(option2)
      this.echarts[2].setOption(option3)
      this.echarts[3].setOption(option4)
    }
  }
}
</script>
<style lang="less" scoped>
.influBox {
  position: relative;
  height: calc(45vh - 84px);
  background-color: rgba(137, 2, 2, 0.32);
  border: 1px solid rgb(255, 0, 14);
  &::before {
    position: absolute;
    top: 0;
    left: 0;
    content: '';
    width: 10px;
    height: 10px;
    border-left: 2px solid rgb(227, 93, 28);
    border-top: 2px solid rgb(255, 225, 123);
  }
  &::after {
    position: absolute;
    top: 0;
    right: 0;
    content: '';
    width: 10px;
    height: 10px;
    border-right: 2px solid rgb(255, 225, 123);
    border-top: 2px solid rgb(227, 93, 28);
  }
  .influTitle {
    color: #fff;
    font-size: 0.375rem;
    font-weight: 900;
    font-family: monospace;
    background-color: rgb(177, 1, 1);
    height: 0.625rem;
    line-height: 0.625rem;
    padding-left: 0.25rem;
  }
  .influCharts {
    width: 100%;
    height: calc(100% - 0.625rem);
    margin-top: 20px;
    display: flex;
    justify-content: space-around;
    .container {
      width: 25%;
      height: 100%;
    }
  }
}
</style>
